Komplexe Webprojekte benötigen einen effizienten Designworkflow. Doch dieser wird oft erschwert durch überholte Software, die die Zusammenarbeit zwischen Designern und Entwicklern nicht fördert. Wer effizient an seinen Projekten arbeiten will, kann mittlerweile eine Wahl aus alternativer Software treffen, die nicht nur alle nötigen Funktionen für UI-Design bietet, sondern zusätzlich Designübergabe, Kundenfeedback und Kommunikation zwischen Projektbeteiligten erleichtert.

Komplexe Webprojekte benötigen einen effizienten Designworkflow. Doch dieser wird oft erschwert durch überholte Software, die die Zusammenarbeit zwischen Designern und Entwicklern nicht fördert. Klassische Designsoftware wie Adobe Photoshop und Illustrator glänzen zwar mit ihren unzähligen Funktionen, können jedoch die Ansprüche an Flexibilität und interaktive Zusammenarbeit für moderne Webprojekte oft nicht erfüllen. Auch der Paketpreis lässt sich für viele durch die meist nur zu einem Bruchteil genutzten Funktionen nicht rechtfertigen. Wer effizient an seinen Projekten arbeiten will, kann mittlerweile eine Wahl aus alternativer Software treffen, die nicht nur alle nötigen Funktionen für UI-Design bietet, sondern zusätzlich Designübergabe, Kundenfeedback und Kommunikation zwischen Projektbeteiligten erleichtert.

Für das Umstellen oder das komplett neue Definieren eines bestehenden Designworkflows sollte man klare Argumente haben. Häufig werden Probleme an Arbeitsprozessen von den Projektbeteiligten früh erkannt, jedoch durch die altbekannten Wege bewältigt. Der Designer erstellt seine Entwürfe mit Photoshop und verschickt sie per PDF an den Kunden. Die Entwürfe kommen ausgedruckt, eingescannt und handschriftlich korrigiert zurück. Entwickler teilen dann ihre Rückfragen über Slack mit und am Ende sind statt eines finalen Designs gleich drei oder vier verschiedene im Umlauf. Um diese zeitintensiven Schwächen in der Kommunikation zu überwinden, sollten Tools gewählt werden, die den gesamten Projektablauf flüssiger gestalten. Dabei ist zu beachten, die Kommunikation zwischen den Teams oder den Teammitgliedern zu erleichtern und eine reibungslose Übergabe der Designs zu gewährleisten. Hat man einmal die ideale Zusammenstellung aus Designsoftware und Kommunikationsmitteln gefunden, wird der Projektablauf erheblich beschleunigt und erspart Mitarbeitern und Kunden viel Arbeit.

Es gibt eine Vielzahl an Tools, die versprechen, den Designprozess und die Kommunikation zwischen Designern, Entwicklern und Kunden zu unterstützen. Die eine richtige Kombination gibt es jedoch nicht. Wichtig ist es, sie auf die eigenen Bedürfnisse im Unternehmen abzustimmen. Eine Softwarekombination, die sich in der Webentwicklung mittlerweile etabliert hat, ist die Arbeit mit den Adobe-Alternativen Sketch, InVision und Zeplin.

Scribbles

Die Optimierung des Designprozesses sollte schon bei den allerersten Schritten anfangen. Denn bevor ans sprichwörtlich Eingemachte, also zur ersten Software geht, beginnt jedes Design auf Papier. Mit Scribbles können Ideen sehr schnell erfasst und abseits komplexer Strukturen visualisiert werden. In der nächsten Stufe können diese Skizzen dann als sogenannte Wireframes dargestellt werden – also als erster Entwurf einer Webseite. Angefangen mit groben Skizzen entwickeln sich diese nach und nach zu einem greifbaren Konzept, das den Auftraggebern präsentiert werden kann. Auch mit den ersten Wireframes können bereits einfache Klickdummies erstellt werden. Diese erleichtern es dem Kunden, ein erstes haptisches Gefühl für die Webseite zu bekommen. Ist die Struktur richtig angelegt? Funktioniert die User Story? Erreicht der User auf schnellem Wege sein Ziel und findet er das richtige Produkt?

Abb. 1: Konzepte für Webseiten beginnen am besten auf dem Papier

Anstatt den Kunden mehrere Entwürfe zur Wahl zu geben, sollte in enger Zusammenarbeit ein Entwurf entwickelt und zusammen mit dem Kunden optimiert werden. In einem gemeinsamen Workshop werden die Erwartungen und Bedürfnisse der Kunden definiert und die Richtung des Designs wird festgelegt. Mögliche Unterstützung bieten hierbei Personas oder User Storys. Diese sollten zusammen mit dem Kunden erstellt werden, denn niemand kennt seine Zielgruppe und seine User besser als der Verkäufer. Mit dieser Vorgehensweise lässt sich das Design viel gezielter gestalten, und Alternativvorschläge werden dadurch höchstens für einzelne Elemente benötigt und nicht für ein gesamtes Design. Zudem ist es sinnvoll, Designphasen zu unterteilen und sich in kürzeren Abständen Feedback einzuholen. So beginnt man beispielsweise mit den ersten wichtigen Seiten. Das können neben der Startseite auch die Seiten sein, auf denen sich der User am häufigsten aufhält, oder diejenigen, die primäre Funktionen der App oder der Webseite enthalten. Auf diese Weise verhindert man, dass zu viel Zeit in die Ausarbeitung der Designs gesteckt wird und man sich darin zu schnell verrennt.

Nach positivem Feedback für den ersten Entwurf können schließlich weitere Seiten designt werden. Natürlich ist es nicht sinnvoll, hierfür jede mögliche Seite mit unterschiedlichen Elementen auszustatten. Die gängigste Praxis ist das Erstellen einzelner Grundelemente nach Prinzip des Atomic Designs. Dieses geht auf den amerikanischen Webdesigner Brad Frost zurück und beschreibt, wie Webprojekte mithilfe von Kleinstteilen zu einem großen Ganzen geformt werden. Detaillierter beschrieben: man kombiniert einzelne Atome und erschafft damit Moleküle, die zusammengesetzt Organismen ergeben und so weiter. Bis eine Welt entsteht – die Webseite. Dieser Prozess beinhaltet laut Frosts System fünf Stufen, die gemeinsam eine Webseite bilden.

User Experince Design Track auf der webinale

Schaut man sich das kleinste Element an, das Atom, so kann das ein Text, ein Icon, eine Form oder auch eine Farbe sein. Werden mehrere Atome zusammengesetzt, bilden diese z. B. einen Button. Menüs, Listen usw. bilden die Organismen. Einzelne Seiten stellen die Templates dar. Die Grundidee dabei ist, dass sich diese Elemente immer auf der Webseite wiederfinden und dadurch ein durchdachtes System bilden. Flexibilität und ein stringenter Aufbau sind die Prinzipien des Prozesses.

Und welche Vorteile bietet so ein System? Einmal erstellt, bietet es dem Projekt eine beliebige Skalierung. Nicht nur die Erstellung neuer Elemente wird dadurch beschleunigt, auch deren technische Umsetzung geht deutlich schneller voran, da Bausteine wiederverwendet werden können. Dieser methodische Workflow ermöglicht es dem Designer, immer wieder neue Elemente zu erschaffen, ohne dabei die Grundregeln zu verletzen. Unterstützt wird die Entwicklung durch die wiederkehrenden Bestandteile. Der Vorteil für den Kunden: Ein stetig erweiterbares, konsistentes Produkt. Werden die einzelnen Komponenten stringent durchgezogen, erhält man zum Schluss nicht nur ein optisch stimmiges Gesamtprodukt, man bekommt auch eine gemeinsame Basis, auf der weitergearbeitet werden kann.

Daneben sollte immer auch die technische Umsetzbarkeit der Designs vom Entwicklerteam gegengeprüft werden, um später unangenehme Überraschungen zu vermeiden. Diese Herangehensweise bietet eine solide Basis, um auch bei der ersten Erstellung von Designs effektiv und zeitsparend zu arbeiten.

Sketch

Um die einzelnen Elemente anzulegen, kommt das Designtool Sketch ins Spiel. Sketch ist eine Software, die alles bereitstellt, um ein User-Interface-Design zu entwickeln. Das Programm ist speziell auf macOS ausgerichtet. Mit seiner intuitiven Oberfläche und nützlichen Plug-ins lässt sich das Toolkit spielend leicht bedienen. Da der Funktionsumfang hier auf das Wichtigste beschränkt wird, können auch Anfänger schnell in das Programm eingearbeitet werden. Durch diese Einfachheit benötigt das Programm außerdem wenig Speicherplatz und läuft in der Regel sehr viel schneller als die Adobe-Software. Man bekommt mit Sketch also kurz gesagt ein kleines und schnelles Programm für UI-Design (Abb. 2).

Mit unterschiedlichen Artboards, vordefinierten Grid-Einstellungen und einfacher responsiver Skalierung von Elementen werden optimale Arbeitsvoraussetzungen geschaffen. Auf Grundlage von Vektoren können Formen und Schriften auf allen möglichen Bildschirmgrößen gestochen scharf dargestellt werden. Das ermöglicht auch Skalierbarkeit, Qualität und Flexibilität der Designs. Außerdem wird eine große Auswahl an Formen, Farben, Zeichentools und alles, was für UI-Design benötigt wird, zur Verfügung gestellt.

In Sketch werden die einzelnen Elemente als Symbole angelegt, die in einer Bibliothek aus wiederverwendbaren Designelementen gespeichert werden. Wird ein Symbol an einer Stelle verändert, wird die Änderung für jedes dieser Symbole übernommen und muss nicht an jedem weiteren Element bearbeitet werden. Das bedeutet Schnelligkeit und Flexibilität für alle Designs und zusätzlich Kostenersparnis auf der Kundenseite. Alles, was man dafür tun muss, ist, die Symbole sinnvoll zu benennen, um sie dann wiederverwenden zu können. Will man untergeordnete Symbole anlegen, wird dieses hinter dem übergeordneten Symbol einfach mit einem Slash getrennt. Nennt man sein Symbol beispielsweise „Button/blau“, wird „blau“ im Ordner „Button“ angezeigt. Das hilft bei einer übersichtlichen Ordnung und Verschachtelung der Elemente, sodass sich auch neue Projektbeteiligte schnell zurechtfinden. Bereits verwendete Symbole können ganz einfach geändert werden, indem man von einer beliebigen Instanz des Symbols mit Doppelklick auf die Symbolvorlage befördert wird. Dort wird jede Änderung auf alle Instanzen dieses Symbols übernommen.

Es gibt unzählige Plug-ins, die nützliche Ergänzungen zum Standardprogramm bieten. Mit Craft können Designs beispielsweise dynamisch mit Inhalten gefüllt werden. Dabei gibt man die Art der Inhalte an, wie zum Beispiel Bilder, Texte oder Telefonnummern, die dann als Platzhalter eingefügt werden. So wirken die Designs vollständiger und müssen nicht einzeln befüllt werden. Außerdem können Elemente vervielfacht und dabei bereits mit Beispielinhalten gefüllt werden.

Fertige Designs werden für die Übergabe an Entwickler exportable gemacht. Händisches Ausmessen der einzelnen Elemente ist Geschichte. Alle Vermaßungen, Abstände, Farbwerte und Schriften werden automatisch hergestellt und sogar als CSS-Code bereitgestellt. Was früher einen extremen Zeitaufwand dargestellt hat, passiert heute innerhalb weniger Sekunden.

inVision

Um die Kunden auf den neuesten Stand zu bringen und regelmäßig Feedback einzuholen, bietet es sich an, die Designs in einer dynamischen Form zu präsentieren. Sogenannte Click-Dummys (Abb. 3) vermitteln nicht nur einen optischen Eindruck, sondern zeigen auch Bedienbarkeit und das dynamische Verhalten einzelner Elemente. Es wird ein interaktiver Prototyp erstellt, indem Screenshots der einzelnen Webseiten klickbar gemacht werden. Unterschiedliche Zustände der einzelnen Elemente können visualisiert werden, indem man dies beispielsweise hoverbar macht. Die einzelnen Seiten werden dann per Klick miteinander verbunden, um so auch den Aufbau der Website widerzuspiegeln. Um sich direkt Feedback von den Kunden einzuholen, kann die Kommentarfunktion von Invision genutzt werden. Statt sich zu allen Designs Notizen zu machen und diese dann möglicherweise erst Tage später in einem Telefonat zu besprechen, können Eindrücke und Fragen sofort geteilt werden. So geht nichts verloren, und offene Punkte werden transparent für die Projektmitglieder dokumentiert. Ebenfalls bietet inVision die Möglichkeit eines Shared-Screen-Systems. Somit können alle Projektbeteiligten bei einer gemeinsamen Absprache auf einen Screen schauen, sich Notizen direkt auf den Designs machen und Scribbles zu möglichen Designänderungen erstellen.

Zeplin

Wurde ein Design vom Kunden abgesegnet und kann auf der Website umgesetzt werden, muss es nur noch an die Entwickler weitergegeben werden. Hier treten oft Probleme auf, die sich allerdings durch die richtige Vorgehensweise vermeiden lassen. Maße und Farbwerte müssen korrekt angegeben werden, und Rückfragen werden oft intransparent für andere Entwickler per Slack oder Mail gestellt, anstatt alle Beteiligten in den Informationsfluss zu involvieren.

Für eine reibungslose Designübergabe wurde das Tool Zeplin (Abb. 4) entwickelt, das als Schnittstelle zwischen Design und Entwicklung fungiert. Hier werden Designs aus Sketch mit wenigen Klicks hochgeladen. Anstatt viel Zeit in das Vermessen und Exportieren zu investieren, können sich Designer schnell wieder auf die wichtigen Aufgaben konzentrieren. Sind die Designs auf dem Zeplin-Server, können sie kommentiert, weiterverarbeitet oder final umgesetzt werden. Entwickler können die hochgeladenen Symbole dann einzeln untersuchen und Assets wie Schriftarten, Farbwerte und exakte Maße der Elemente direkt als CSS-Code kopieren. Zudem bietet Zeplin die Möglichkeit, schnelle und einfache Style Guides anzulegen. Hier können die wichtigsten Farbwerte und Schriftarten zusammengefasst dargestellt werden, um der Entwicklung einen schnelleren Überblick zu ermöglichen. Neben dem Style Guide gibt es die Option, einzelne Komponenten ebenfalls gesammelt in einer Übersicht bereitzustellen. Wie bereits beschrieben, erleichtert es diese Herangehensweise des Atomic Designs, seitenübergreifend ein einheitliches und skalierbares Design zu erstellen und den Entwicklungsaufwand geringer zu halten. Somit unterstützt Zeplin den Workflow zwischen Design und Entwicklung, garantiert eine genauere Umsetzung der Designs und bietet zudem einen einfachen Kommunikationskanal der beiden Projektgruppen.

Fazit

Natürlich dauert eine Umstellung der digitalen Arbeitsabläufe und Software seine Zeit, weshalb viele Unternehmen lange zögern, bevor Veränderungen angegangen werden. Doch dank intuitiven und simplen Programmen wie Sketch, InVision und Zeplin beschränkt sich die Einarbeitungszeit auf wenige Wochen und verschafft im Gegenzug einen erheblichen Boost an Schnelligkeit und Produktivität.